<template>
  <div class="app-container">
    <div id="selected_user_list">
      <el-tag
        v-for="(tag) in selectedUserList"
        :key="tag.userId"
        closable
        size="medium"
        :disable-transitions="false"
        @close="handleClose(tag)"
      >
        <div>
          <el-avatar :size="20" :src="tag.avatar"></el-avatar>
          {{tag.nickname}}
        </div>
      </el-tag>

      <el-button type="primary" icon="el-icon-edit" circle @click="show_user_table=true"></el-button>
      <el-button
        type="success"
        icon="el-icon-check"
        circle
        v-if="show_user_table"
        @click="handleFinish"
      ></el-button>
    </div>

    <div id="user_table" v-if="show_user_table">
      <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
       <el-form-item label="身份" prop="familyRelationship">
        <el-select
          v-model="queryParams.familyRelationship"
          clearable
          placeholder="请选择"
          size="small"
        >
          <el-option
            v-for="item in relationshipOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue.toString()"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input
          v-model="queryParams.nickname"
          placeholder="请输入用户昵称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="手机" prop="phone">
        <el-input
          v-model="queryParams.phone"
          placeholder="请输入用户手机"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="禁言" prop="isBanned">
        <el-select v-model="queryParams.isBanned" clearable placeholder="请选择" size="small">
          <el-option
            v-for="item in boolOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue.toString()"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="queryParams.sex" clearable placeholder="请选择性别" size="small">
          <el-option
            v-for="item in sexOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue.toString()"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="主账号" prop="isFamilyOwner">
        <el-select v-model="queryParams.isFamilyOwner" clearable placeholder="请选择" size="small">
          <el-option
            v-for="item in boolOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue.toString()"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="家庭码" prop="familyCode">
        <el-input
          v-model="queryParams.familyCode"
          placeholder="请输入家庭码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="VIP时间" prop="vipDeadlineTime">
        <el-date-picker
          v-model="queryParams.vipDeadlineTime"
          value-format="yyyy-MM-dd"
          type="daterange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
          align="right"
        ></el-date-picker>
      </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="loading"
        :data="generaluserList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="头像" align="center" prop="avatar" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-avatar :size="50" :src="scope.row.avatar"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="昵称" align="center" prop="nickname" :show-overflow-tooltip="true" />
        <el-table-column
          label="手机"
          align="center"
          prop="phone"
          width="120"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="身份"
          align="center"
          prop="familyRelationship"
          width="100"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          label="主账号"
          align="center"
          prop="isFamilyOwner"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="会员等级"
          align="center"
          prop="userLevel"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="积分" align="center" prop="integral" :show-overflow-tooltip="true" />
        <el-table-column
          label="VIP有效期"
          align="center"
          prop="vipDeadlineTime"
          width="120"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="状态" align="center" prop="status" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-value="T"
              inactive-value="F"
              @change="handleSwitchChange(scope.row,'status','状态')"
            />
          </template>
        </el-table-column>
        <el-table-column label="禁言" align="center" prop="isBanned" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isBanned"
              active-value="T"
              inactive-value="F"
              @change="handleSwitchChange(scope.row,'isBanned','禁言')"
            />
          </template>
        </el-table-column>

        <el-table-column label="用户分组" align="center" prop="groupId" :show-overflow-tooltip="true" />
        <el-table-column label="用户类型" align="center" prop="userType" :show-overflow-tooltip="true" />
        <el-table-column label="用户备注" align="center" prop="mark" :show-overflow-tooltip="true" />
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageIndex"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<style>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>

<script>
import { listgeneralUser } from "@/api/generaluser";

export default {
  name: "Config",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 参数表格数据
      configList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 类型数据字典
      typeOptions: [],
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageIndex: 1,
        pageSize: 10,
        familyCode: undefined,
        familyRelationship: undefined,
        groupId: undefined,
        isBanned: undefined,
        isFamilyOwner: undefined
      },

      generaluserList: [], //列表
      sexOptions: [], //性别选项
      relationshipOptions: [], //家庭身份
      usertypeOptions: [], //用户类型
      boolOptions: [], //是否
      userLevelOptions: [], //会员级别

      //选中的会员
      selectedUserList: [],
      //是否显示table
      show_user_table: false
    };
  },
  created() {
    this.getList();
    this.sexOptions = this.$store.getters.parameter.sys_user_sex;
    this.relationshipOptions = this.$store.getters.parameter.sys_family_relationship;
    this.usertypeOptions = this.$store.getters.parameter.general_user_type;
    this.boolOptions = this.$store.getters.parameter.sys_bool;
    this.userLevelOptions = this.$store.getters.parameter.general_user_level;
  },
  methods: {
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      listgeneralUser(this.addDateRange(this.queryParams, this.dateRange)).then(
        response => {
          // console.log(response)
          this.generaluserList = response.data.list;
          this.total = response.data.count;
          this.loading = false;
        }
      );
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageIndex = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectedUserList = selection;
      this.ids = selection.map(item => item.userId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },

    /** 确认选中按钮操作 */
    handleFinish() {
      const Ids = this.ids;
      let that = this;
      this.$confirm('是否确认选择编号为"' + Ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(res=> {
          this.show_user_table = false;
          //传给父组件
          this.$emit('setUserIds', Ids)
        })
        .catch(function() {});
    },

    handleClose(tag) {
      this.selectedUserList.splice(this.selectedUserList.indexOf(tag), 1);
    }
  }
};
</script>